import { Chart } from '@antv/g2';
import { useLayoutEffect } from 'react'
const Com = () => {

    useLayoutEffect(() => {
        const data = [
          { year: '1951 年', sales: 38 },
          { year: '1952 年', sales: 52 },
          { year: '1956 年', sales: 61 },
          { year: '1957 年', sales: 145 },
          { year: '1958 年', sales: 48 },
          { year: '1959 年', sales: 38 },
          { year: '1960 年', sales: 38 },
          { year: '1962 年', sales: 38 },
        ];
        const chart = new Chart({
          container: 'container',
          autoFit: true,
          height: 500,
        });
        
        chart.data(data);
        chart.scale('sales', {
          nice: true,
        });
        
        chart.tooltip({
          showMarkers: false
        });
        chart.interaction('active-region');
        
        chart.interval().position('year*sales');
        
        chart.render();
      })
      return (
        <div style={{ width: '100%'}}>
          <h1>G2使用示例</h1>
          <div id="container"></div>
        </div>
      )
}

export default Com